<script setup lang="ts">
import { ref, watch, computed } from "vue";
import Flex from "@/components/Layout/Flex.vue";

const props = defineProps(["message"]);

const data = ref({
  message: "",
  type: true,
  tabIndex: 0,
  tabs: [
    {
      name: "home",
      label: "咨询"
    },
    {
      name: "account",
      label: "找律师"
    },
    {
      name: "hetong",
      label: "合同"
    },
    {
      name: "pufa",
      label: "普法"
    }
  ]
});
// watch
watch(
  () => props.message,
  value => {
    data.value.message = value;
  }
);
// computed
const showSend = computed(() =>
  ["home", "hetong"].includes(data.value.tabs[data.value.tabIndex].name)
);
// emit
const emit = defineEmits(["selectTab", "sendMessage"]);
// const onTab = (index: number) => {
//   if (data.value.tabIndex === index) {
//     return;
//   }
//   data.value.tabIndex = index;
//   emit("selectTab", data.value.tabs[index]);
// };
const onSend = () => {
  if (!data.value.message) {
    uni.showToast({
      icon: "none",
      title: "请输入问题"
    });
    return;
  }
  emit("sendMessage", data.value.message);
  data.value.message = "";
};
</script>

<template>
  <view class="footer-container">
    <Transition name="fade">
      <Flex v-show="showSend" class="send">
        <template v-if="data.type">
          <uv-textarea
            class="textarea"
            v-model="data.message"
            :maxlength="-1"
            autoHeight
            placeholderStyle="color:#9297B6;font-size:14px;"
            placeholder="有问题就来问我哦～"
          ></uv-textarea>
          <uv-button type="primary" style="margin-left: 20px" @click="onSend"
            >发送</uv-button
          >
          <!-- <image
            src="@/static/Vector.png"
            class="vector shrink"
            @click="data.type = !data.type"
          /> -->
        </template>
        <!-- <template v-else>
          <view class="audio">按住说话</view>
          <view @click="data.type = !data.type">
            <image
              mode="widthFix"
              src="@/static/PaperFile.png"
              class="vector shrink"
            />
          </view>
        </template>

        <image src="@/static/zip.png" class="zip shrink" /> -->
      </Flex>
    </Transition>
    <!-- <Flex class="tabs" justify="space-around">
      <view
        v-for="(item, index) in data.tabs"
        :class="['tab', { active: index === data.tabIndex }]"
        :key="item.name"
        @click="onTab(index)"
      >
        <view :class="['icon', item.name]"></view>
        {{ item.label }}
      </view>
    </Flex> -->
  </view>
</template>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  /* transform: translateY(30px); */
}
.tabs {
  margin-top: 12px;
  .tab {
    font-size: 12px;
    color: #9297b6;
    text-align: center;
    &.active {
      color: #4059fd;
      .icon {
        background-position-y: 0;
      }
    }
    .icon {
      width: 28px;
      height: 28px;
      display: block;
      margin: 0 auto 4px;
      background-image: url("@/static/tabs/tab.png");
      background-size: 112px 56px;
      background-position-y: -28px;
      &.home {
        background-position-x: 0;
      }
      &.account {
        background-position-x: -28px;
      }
      &.hetong {
        background-position-x: -56px;
      }
      &.pufa {
        background-position-x: -84px;
      }
    }
  }
}
.footer-container {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-100%);
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
  background-color: #f2f4ff;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.audio {
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
  height: 21px;
  padding: 9px 15px;
  color: #4059fd;
  font-size: 14px;
  text-align: center;
  user-select: none;
}
.vector {
  width: 17.6px;
  height: 22.4px;
  margin: 0 16px;
}
.shrink {
  flex-shrink: 0;
}
.zip {
  width: 20px;
  height: 20px;
}
.file {
  width: 19.2px;
  height: 21.6px;
}
.textarea {
  max-height: 50px;
  width: 100%;
  border-radius: 10px;
  border: none;
  padding: 9px 15px;
  :deep(.uv-textarea__field),
  :deep(.uni-textarea-wrapper) {
    max-height: 50px;
  }
}
</style>
